.card-menu {
    cursor:pointer;
}
.card-menu > i {
    font-size: 12px;
    color: #6b6b6b;
}

.card-menu > ul {
    display: none;
    position: absolute;
    top: 19px;
    line-height: 1.7;
    left: 1.2rem;
    width: 200px;
    border-radius: 4px;
    padding: 5px 0;
    background-color: #FFFFFF;
    z-index: 11;
    box-shadow: 0 0 15px 0 #bbb;
    -moz-box-shadow: 0 0 15px 0 #bbb;
    -webkit-box-shadow: 0 0 15px 0 #bbb;
}

    .card-menu > ul li {
        padding: 5px 5px;
        color: #000000;
        display: flex;
        cursor: pointer;
        margin: 1px;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

        .card-menu > ul li:hover{
            background-color: #f5f5f5;

        }

        .card-menu > ul li > * {
            display: inline-flex;
            width: 100%;
            text-decoration: none;
            flex: 1 1 100%;
            cursor: pointer;
            align-items: center;
            font-size: 16px;
            padding: 0px 5px;
            gap: 0.5em;
            color:initial;
        }

            .card-menu > ul > hr{
                margin: 3px 0;
                color: var(--color-border);
            }

            .card-menu > ul li > * i {
                text-align: center;
                width: 1rem;
                font-size: 0.9em;
            }

.recomand + .card-menu > i {
    color: white;
}